<template>
  <div>
    <Adaption>
      <br>
      <el-form>
        <el-input v-model="input" placeholder="请输入文章标题">
          <el-button @click="submitArticle()" type="primary" slot="append" plain>发布
          </el-button>
        </el-input>
        <!--      style为减少层数-->
        <!--      以下为文本域-->
        <div id="div1" style="z-index: 0;position: relative">
        </div>
      </el-form>
    </Adaption>
  </div>
</template>

<script>
import E from 'wangeditor'
import Adaption from '../base/Adaption'
import Head from '../base/Head'
import axios from 'axios'
import Qs from 'qs'

export default {
  name: 'editor',
  components: {Head, Adaption},
  data () {
    return {
      input: '',
      editor: '',
      bottomHeight: ''
    }
  },
  methods: {
    submitArticle: function () {
      // 获取当前用户id
      axios.get('/user/getUser').then(function (res) {
        var uid = ''
        uid = res.data.result.id
        // 发送添加文件请求
        axios.post('/article/addArticle', Qs.stringify(
          {title: this.input, content: this.editor.txt.html(), 'user.id': uid})).then(function (res) {
          console.log(res.data)
        })
      }.bind(this))
      this.$message({
        message: '发布成功！',
        type: 'success'
      })
      this.$router.replace('/index/indexContent/hot')
    }
  },
  mounted () {
    const editor = new E('#div1')
    editor.config.showLinkImg = false
    editor.config.uploadImgServer = 'http://localhost:8080/article/uploadPhoto'
    editor.config.uploadFileName = 'uploadFile'
    // 请求参数
    editor.config.uploadImgParams = {
      uid: '111'
    }
    editor.config.uploadImgHooks = {
      before: function (xhr) {
        console.log(xhr)
      },
      success: function (xhr) {
        console.log(xhr)
      },
      error: function (xhr, editor, resData) {
        console.log('error', xhr, resData)
      },
      timeout: function (xhr) {
        console.log('timeout')
      }
    }
    editor.config.menus = [
      'head',
      'bold',
      // 'fontSize',
      // 'fontName',
      // 'italic',
      // 'underline',
      // 'strikeThrough',
      // 'indent',
      // 'lineHeight',
      // 'foreColor',
      'backColor',
      // 'link',
      // 'list',
      // 'todo',
      // 'justify',
      // 'quote',
      // 'emoticon',
      'image',
      // 'video',
      'table',
      'code'
      // 'splitLine',
      // 'undo',
      // 'redo',
    ]
    editor.create()
    this.editor = editor
    editor.config.customUploadImg = (resultFiles, insertImgFn) => {
      console.log(resultFiles)
      // axios.post('/article/uploadPhoto', {uploadFile: resultFiles}, {}).then(function (res) {
      //   console.log(res.data)
      // })
    }
  }
}
</script>
